<template>
  <el-dialog v-model="visible" title="节点详情" width="80%" destroy-on-close>
    <GapedColumn v-if="visible" width="100%">
      <el-tabs type="border-card">
        <el-tab-pane label="节点信息">
          <node-info-list :info="nodeBusinessInfo" />
        </el-tab-pane>
        <el-tab-pane label="告警日志">
          <log-search-results
            :data="warningLogs"
            :loading="apiStore.apiStates.getWarningLogsByIp.loading"
            :total="warningTotal"
            showOriginLogLevel
            @view-details="showDetail"
            @page-change="handleWarningPageChange"
          />
        </el-tab-pane>
        <el-tab-pane label="所有日志">
          <log-search-results
            :data="logs"
            :loading="apiStore.apiStates.getLogsByIp.loading"
            :total="total"
            showOriginLogLevel
            @view-details="showDetail"
            @page-change="handlePageChange"
          />
        </el-tab-pane>
      </el-tabs>
    </GapedColumn>
  </el-dialog>
  <LogDetailDialog ref="logDetailDialog" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useApi from '@/core/apiStore'
import { GapedColumn } from '@/core/components'
import LogSearchResults from '@/components/logSearch/LogSearchResults.vue'
import LogDetailDialog from '@/components/logSearch/LogDetailDialog.vue'
import NodeInfoList from './NodeInfoList.vue'
import type { NodeBusinessInfo } from './types'
import { transformLogData } from '@/utils'

const apiStore = useApi()

const logDetailDialog = ref(null)
const visible = ref(false)
const logs = ref([])
const warningLogs = ref([])
const currentPage = ref(1)
const warningCurrentPage = ref(1)
const total = ref(0)
const warningTotal = ref(0)
const searchTag = ref('')
const nodeBusinessInfo = ref<NodeBusinessInfo>({})

const fetchLogs = async () => {
  const { data } = await apiStore.getLogsByIp({
    search_tag: searchTag.value,
    ip: nodeBusinessInfo.value.ip,
    page: currentPage.value,
  })

  logs.value = transformLogData(data.rows)
  total.value = data.total || 0
  nodeBusinessInfo.value.total = data.total
}

const fetchWarningLogs = async () => {
  const { data: warningData } = await apiStore.getWarningLogsByIp({
    search_tag: searchTag.value,
    ip: nodeBusinessInfo.value.ip,
    page: warningCurrentPage.value,
    log_status: 'warning',
  })

  warningLogs.value = transformLogData(warningData.rows)
  warningTotal.value = warningData.total || 0
}

const handlePageChange = pageNum => {
  currentPage.value = pageNum
  fetchLogs()
}

const handleWarningPageChange = pageNum => {
  warningCurrentPage.value = pageNum
  fetchWarningLogs()
}

const showDetail = log => {
  logDetailDialog.value.show(log)
}

const show = ({ ip, searchTag: searchTagParam, category, label }) => {
  nodeBusinessInfo.value = {
    ip,
    category,
    label,
  }
  console.log('nodeBusinessInfo', nodeBusinessInfo.value)
  searchTag.value = searchTagParam
  fetchLogs()
  fetchWarningLogs()
  visible.value = true
}

defineExpose({
  show,
})
</script>
